// 采购入库历史记录详情页面

import React, {Component} from 'react';
import {DeviceEventEmitter, StatusBar, Text, View, Image, TouchableWithoutFeedback, TouchableNativeFeedback, ScrollView, TouchableOpacity, StyleSheet, TextInput, FlatList} from 'react-native';
import styles, {mainBackgroundColor, white} from "../../../style/global";
import storeActions from '../../../store/actions/store';
import {bindActionCreators} from 'redux';
import {is, fen_to_yuan, fen_money, getNowFormatDate} from '../../../utils';
import {Actions} from "react-native-router-flux";
import {connect} from "react-redux";
import CXIcon from '../../../style/icon/CXIcon';
import Modal from 'react-native-modalbox';
import ModalDropdown from 'react-native-modal-dropdown';
import Tips from "react-native-root-tips";

class ProductDataHistoryDetailPage extends Component{
    constructor(props){
        super(props);
        this.page = 1;
        this.id = '';
        this.state = {
            isLoadMore:false,
            activeIndex:0,
            searchVal:'',
            currentGoodsList: [],
            meta: {
                store_nums: '',
                purchaseAmount: ''
            },
            store_nums: 0,
            note: '',
            currentShop: '',
            searchGoods: [] // 搜索到的商品列表
        };
        this.currentType = 'PURCHASE';
    }
    componentDidMount(){
        let {id,storeAction} = this.props;
        this.id = id;
        storeAction.getPurchaseDetailData( id, 1);
        this.listener = DeviceEventEmitter.addListener('isLoadMorePurchaseItem',(isLoadMore, meta) => {
            console.log('这个是meta', meta);
            this.setState({
                isLoadMore:isLoadMore,
                meta: meta
            })
        })
    }
    //创建空布局
    _createEmptyView(){
        return (
            <View style={{height:'100%', alignItems:'center', justifyContent:'center',paddingVertical: 20}}>
                <Text style={{fontSize:16}}>
                    暂无历史数据!!!
                </Text>
            </View>
        );
    }
    //加载更多
    _onLoadMore(){
        if(this.state.isLoadMore){
            this.page = this.page + 1;
            let {storeAction} = this.props;
            storeAction.getPurchaseDetailData(this.id, this.page);
        }
    }
    //渲染库存列表
    _renderStockList(rowData,index){
        return(
            <TouchableNativeFeedback>
                <View style={style.listItem}>
                    <Text style={[style.listItemText]}>
                        {rowData.meta.goods_no}
                    </Text>
                    <Text style={[style.listItemText]}>
                        {rowData.meta.goods_name}
                    </Text>
                    <Text style={[style.listItemText]}>
                        {rowData.meta.color}, {rowData.meta.size}
                    </Text>
                    <Text style={[style.listItemText]}>
                        {rowData.quantity}
                    </Text>

                </View>
            </TouchableNativeFeedback>
        )
    }
    render() {
        let{storeState} = this.props;
        return (
            <View>
                <StatusBar hidden={true}/>
                <View style={style.list}>
                    <View style={style.listItem}>
                        <Text style={[style.listItemText, style.titleColor]}>
                            货号
                        </Text>
                        <Text style={[style.listItemText, style.titleColor]}>
                            商品名称
                        </Text>
                        <Text style={[style.listItemText, style.titleColor]}>
                            规格
                        </Text>
                        <Text style={[style.listItemText, style.titleColor]}>
                            数量
                        </Text>
                    </View>
                    <View>
                        <FlatList
                            style={{height: '100%'}}
                            keyExtractor={(item, index) => index.toString()}
                            data={storeState.productDataHistoryDetailList}
                            renderItem={({item,index}) => this._renderStockList(item,index)}
                            onEndReached = {()=> this._onLoadMore()}
                            onEndReachedThreshold={0.1}
                            extraData={storeState.productDataHistoryDetailList}
                            ListEmptyComponent={this._createEmptyView}
                        >
                        </FlatList>
                    </View>
                </View>
            </View>
        )
    }
}

const style = StyleSheet.create({
    search: {
        height: '13%',
        paddingHorizontal: 30,
        flexDirection: 'row',
        alignItems: 'center',
    },
    selectBox: {
        flexDirection: 'row',
        alignItems: 'center',
        flex: 1
    },
    searchInput: {
        width: 320,
        backgroundColor: white,
        paddingHorizontal: 10,
        height: 44,

    },
    searchText: {
        width: 70,
        textAlign: 'center',
        lineHeight: 44,
        backgroundColor: mainBackgroundColor,
        color: white
    },
    historyText: {
        width: 90,
        textAlign: 'center',
        lineHeight: 44,
        backgroundColor: '#4B8AF2',
        color: white,
        marginLeft: 40
    },
    list: {
        height: '100%',
        backgroundColor: white,
        paddingHorizontal: 30,
        paddingBottom: 50
    },
    listItem: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingVertical: 15,
        borderBottomWidth: 1,
        borderColor: '#F0F0F5'
    },
    listBtnBox: {
        flex: 2,
    },
    listBtn: {
        width: 80,
        backgroundColor: mainBackgroundColor,
        alignItems: 'center',
        borderRadius: 1,
        paddingVertical: 10
    },
    listItemText: {
        flex: 2,
        fontSize: 14,
        color: '#4A4A4A'
    },
    titleColor: {
        color: '#909090'
    },
    flex1: {
        flex: 1
    },
    itemRight: {
        flexDirection: 'row',
        alignItems: 'center',
        flex: 1
    },
    dropDown: {
        // width: 120,
        paddingRight: 12
    },

    dropDownBox: {
        width: 120,
        // backgroundColor: '#F3F3F3',
        height: 44,
        // width: 100,
        // borderRadius: 4,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        // padding: 12,
        marginRight: 5,
        borderRightWidth: 1,
        borderColor: '#D8D8D8'
    },
    tableInput: {
        height: 30,
        borderWidth: 1,
        borderColor: '#D7D7D7',
        flexDirection: 'row',
        alignItems: 'center',
        borderRadius: 1,
    },
    inputAdd: {
        height: 30,
        lineHeight: 30,
        width: 30,
        borderLeftWidth: 1,
        borderLeftColor: '#D7D7D7',

    },
    textInput: {
        textAlign: 'center',
        height: 50,
        flex: 1,
        color: '#4A4A4A',
    },
    inputCut: {
        height: 30,
        lineHeight: 30,
        width: 30,
        borderRightWidth: 1,
        borderRightColor: '#D7D7D7'
    },
    inputDelete: {
        width: 20,
        height: 20,
        lineHeight: 20,
        backgroundColor: mainBackgroundColor,
        color: white,
        borderRadius: 20,
        textAlign: 'center',
        marginVertical: 10
    },
    // 搜索弹窗部分
    searchModalBox: {

        /* position: 'absolute',
         top: 0,
         width: 900,
         flex: 1,*/
        // alignItems: 'center',
        backgroundColor: white,
        borderRadius: 4
    },
    searchTitle: {
        height: 60,
        justifyContent: 'center',
        paddingLeft: 30,
        borderBottomWidth: 1,
        borderBottomColor: '#D8D8D8'
    },
    searchInputBox: {
        paddingHorizontal: 30,
        paddingVertical: 20,
        flexDirection: 'row',
        alignItems: 'center',
        borderBottomWidth: 1,
        borderBottomColor: '#D8D8D8',

    },
    searchBtn: {
        width: 120,
        height: 45,
        textAlign: 'center',
        lineHeight: 45,
        backgroundColor: mainBackgroundColor,
        borderTopRightRadius: 4,
        borderBottomRightRadius: 4
    },
    searchInputs: {
        paddingLeft: 15,
        height: 45,
        backgroundColor: '#F3F3F3',
        borderTopLeftRadius: 4,
        borderBottomLeftRadius: 4
    },
    searchGoods: {
        paddingVertical: 30,
        paddingHorizontal: 10,
        // height: 280,

    },
    searchScrollView: {
        height: 280,
    },
    closeIcon: {
        position: 'absolute',
        right: -30,
        top: -30,

    },
    goodsItemBox: {
        width: '33%',
        marginBottom: 20,
        paddingHorizontal: 10
    },
    goodsItem: {
        padding: 10,
        backgroundColor: '#F3F3F3',
        borderWidth: 1,
        borderColor: '#D7D7D7',
        borderRadius: 4,
    },
    dashed: {
        borderStyle: 'dashed'
    },
    goodsNo: {
        fontSize: 16,
        color: '#4A4A4A',
        fontWeight: 'bold'
    },
    goodsNames: {
        fontSize: 12,
        color: '#4A4A4A',
        marginTop: 5
    },
    bigSizeType: {
        fontSize: 14,
        fontWeight: 'bold',
        color: mainBackgroundColor
    },
    goodsNum: {
        flexDirection: 'row',
        alignItems: 'center',
        marginTop: 5
    },
});

export default connect(state =>({
    storeState: state.store
}),dispatch =>({
    storeAction: bindActionCreators(storeActions,dispatch)
}))(ProductDataHistoryDetailPage);
